package com.example.treehole.ui.page.myself

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.treehole.LocalMyselfViewModel
import com.example.treehole.LocalNavController
import com.example.treehole.LocalUserViewModel
import com.example.treehole.R
import kotlinx.coroutines.launch


@Composable
fun MyselfScreen() {
    val navController = LocalNavController.current

    val userViewModel = LocalUserViewModel.current
    val userId by userViewModel.userId.collectAsState()
    val jwlToken by userViewModel.jwlToken.collectAsState()
    val scope = rememberCoroutineScope()

    val myselfViewModel = LocalMyselfViewModel.current


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(0.dp)
            .background(Color.Transparent),
        verticalArrangement = Arrangement.Top
    ) {
        Image(
            painter =
            painterResource(
                id = R.drawable._8c19f743d43d0005c4327a97c5ff1905eb50e8f
            ), // 替换为你的图片资源
            contentDescription = "树洞图片",
            modifier = Modifier.fillMaxWidth() // 宽度填满父容器
        )
        Spacer(modifier = Modifier.height(18.dp)) // 占据剩余空间，将按钮放在底部
        Column(
            modifier = Modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(16.dp) // 按钮之间的间距
        ) {
            BoxButton(
                onClick = {
                    navController.navigate("myPosts")
                    scope.launch {
                        userId?.let { myselfViewModel.refreshMyPostList(jwlToken, it) }
                    }
                },
                text = "我的帖子"
            )
            BoxButton(
                onClick = {
                    navController.navigate("myComments")
                    scope.launch {
                        userId?.let {
                            myselfViewModel.refreshMyCommentList(jwlToken, it)
                        }
                    }
                },
                text = "我的评论"
            )
            BoxButton(
                onClick = {
                    scope.launch {
                        userViewModel.logout()
                    }
                    navController.navigate("treehole")
                },
                text = "退出登录"
            )
        }
    }

}
